<template>
  <view>
    <cu-custom bgColor="bg-themeColor" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">邀请好友来砍价</block>
    </cu-custom>
    <view class="detailBack"></view>
    <view class="cu-card article">
      <view class="cu-item">
        <navigator class="padding" hover-class="none" :url="'/pages/shop/shop-detail/index?id=' + shopNewInfo.id">
          <image class="cu-avatar sm radius" :src="shopNewInfo.imgUrl" />
          <!-- <view class="cu-avatar sm radius" :style="'background-image:url(' + shopNewInfo.imgUrl + ')'"></view> -->
          <text class="text-black text-bold margin-left-sm">{{
            shopNewInfo.name
          }}</text>
          <text class="cuIcon-right text-sm"></text>
        </navigator>
        <view class="margin-left-sm">
          <view class="action">
            <text class="cuIcon-titles" :class="'text-' + theme.themeColor"></text>{{ bargainInfo.name }}
          </view>
          <view class="flex justify-between margin-xs">
            <text class="text-sm text-gray margin-left-sm"
              v-if="bargainInfo.launchNum">已有{{ bargainInfo.launchNum }}人参与</text>
            <text class="text-blue text-sm margin-right-sm" @tap="ruleShow">砍价规则</text>
          </view>
        </view>

        <view class="content">
          <image :src="bargainInfo.picUrl" mode="aspectFill" class="row-img margin-top-xs"></image>
          <view class="desc">
            <view class="text-black margin-top-sm overflow-2">{{
              bargainInfo.goodsSpu.name
            }}</view>
            <view class="text-gray text-sm overflow-1" v-if="bargainInfo.goodsSku.specs.length > 0">{{ specInfo }}
            </view>
            <view class="flex justify-start margin-top-sm align-center">
              <view class="text-price text-bold text-xl text-red">{{
                bargainInfo.bargainPrice
              }}</view>
              <view class="text-price text-decorat text-gray margin-left-sm">{{
                bargainInfo.goodsSku.salesPrice
              }}</view>
              <!-- <view class="cu-tag bg-red radius sm margin-left" v-if="bargainInfo.goodsSpu.freightTemplat.type == '2'">
                包邮</view> -->
            </view>
          </view>
        </view>
        <!-- 活动倒计时 -->
        <view class="countDownBox">
          <view class="countDown radius bg-themeColor" v-if="bargainInfo.validEndTime">
            <view class="content">距结束还剩：<count-down class="text-red"
                :outTime="dateUtil.getOutTime(bargainInfo.validEndTime)" @countDownDone="countDownDone"></count-down>
            </view>
          </view>
          <view v-if="bargainInfo.bargainUser && hasBargainUser">
            <view class="themeColor text-sm text-bold">已有{{ bargainCutList.length }}人为您砍掉{{
                havCutPrice
              }}元，还剩{{
                numberUtil.numberSubtract(canCutPrice, havCutPrice)
              }}元</view>
            <view class="cu-progress round margin-top bg-themeColor1">
              <view class="bg-red" class="bg-themeColor" :style="'width: ' + cutPercent">{{ cutPercent }}
              </view>
            </view>
          </view>
        </view>

        <view class="padding-lr text-center margin-top-sm" v-if="bargainInfo">
          <!-- 没参与 -->
          <view v-if="!(bargainInfo.bargainUser && hasBargainUser)">
            <button class="button2"
              v-if="bargainInfo.enable == '1' && bargainInfo.status == '1'" :disabled="disabled" @tap="bargainUserSave">
              发起砍价
            </button>
            <button class="button3" v-if="bargainInfo.status == '0'">
              活动未开始
            </button>
            <button class="button3" v-if="bargainInfo.status == '2'">
              活动已过期
            </button>
          </view>
          <!-- 已经参与 -->
          <view v-if="bargainInfo.bargainUser && hasBargainUser">
            <button class="button1 " :class="'bg-' + theme.themeColor"
              v-if="bargainInfo.bargainUser.status == '0'" @click="shareShowFun">砍价免费拿
            </button>
            <button class="button1"
              v-if="bargainInfo.bargainUser.status == '1'">
              已完成砍价
            </button>
            <button class="button3 "
              v-if="bargainInfo.bargainUser.status == '2'">
              活动已过期
            </button>
          </view>
        </view>
        <view v-if="userInfo && bargainInfo.bargainUser && hasBargainUser">
          <view class="padding text-center" v-if="bargainInfo.bargainUser.userId != userInfo.id">
            <button class="cu-btn round bg-orange cuIcon-cardboardforbid lg" :class="'bg-' + theme.themeColor"
              :disabled="disabled" @tap="bargainCutSave" v-if="
                bargainInfo.enable == '1' &&
                bargainInfo.bargainUser.status == '0' &&
                !bargainInfo.bargainUser.bargainCut
              ">
              帮砍一刀
            </button>
            <button class="cu-btn round bg-gray cuIcon-check lg" v-if="
                bargainInfo.bargainUser.status == '0' &&
                bargainInfo.bargainUser.bargainCut
              ">
              已经砍过了
            </button>
            <navigator class="cu-btn round bg-cyan lg margin-left" hover-class="none"
              :url="'../bargain-detail/index?id=' + bargainInfo.id">发起新砍价</navigator>
          </view>
          <view class="padding text-center" v-if="
              (bargainInfo.bargainUser.status == '1' ||
                bargainInfo.bargainUser.floorBuy == '0') &&
              bargainInfo.bargainUser.userId == userInfo.id
            ">
            <button class="cu-btn round bg-green.light lg" @tap="toBuy" v-if="
                (bargainInfo.bargainUser.status == '1' ||
                  bargainInfo.bargainUser.floorBuy == '0') &&
                bargainInfo.bargainUser.isBuy == '0'
              ">
              ¥
              {{
                numberUtil.numberSubtract(
                  bargainInfo.goodsSku.salesPrice,
                  havCutPrice
                )
              }}
              砍后价购买
            </button>
            <navigator hover-class="none" :url="
                '/pages/order/order-detail/index?id=' +
                bargainInfo.bargainUser.orderId
              " class="cu-btn round bg-green.light lg" v-if="bargainInfo.bargainUser.isBuy == '1'">购买成功</navigator>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-card mar-top-30" v-if="bargainCutList.length > 0">
      <view class="cu-item">
        <view class="bg-white solid-bottom padding-tb flex justify-center">
          <image src="../../../static/images/bargainRankLeft.png" style="width: 66rpx; height: 18rpx; margin: auto 0" />
          <view class="text-center text-lg text-bold themeColor margin-lr-sm">
            砍价记录</view>
          <image src="../../../static/images/bargainRankRight.png"
            style="width: 66rpx; height: 18rpx; margin: auto 0" />
        </view>
        <view class="cu-list menu-avatar">
          <view class="cu-item" v-for="(item, index) in bargainCutList" :key="index">
            <view class="cu-avatar round" :style="'background-image:url(' + item.headimgUrl + ');'"></view>
            <view class="content text-sm" style="left: 110rpx">
              <view class="text-grey" style="font-size: 24rpx !important">{{
                item.nickName
              }}</view>
              <view class="text-grey">{{ item.createTime }}</view>
            </view>
            <view class="action margin-right text-sm text-grey" style="width: 150rpx !important">
              砍掉<text class="themeColor">{{ item.cutPrice }}</text>元
            </view>
          </view>
          <view class="cu-load bg-white" v-if="loadmore" @tap="loadMore">加载更多</view>
        </view>
      </view>
    </view>

    <view class="cu-card mar-top-30">
      <view class="cu-item">
        <view class="cu-bar bg-white">
          <view class="content">商品信息</view>
        </view>
        <view class="bg-white">
          <jyf-parser :html="article_description"></jyf-parser>
        </view>
        <view class="cu-load bg-gray to-down">已经到底啦...</view>
      </view>
    </view>
    <!-- html转wxml -->
    <poster id="poster" ref="posterRef" :hide-loading="false" :preload="false" :config="posterConfig"
      @success="onPosterSuccess" @fail="onPosterFail"></poster>
    <view :class="'cu-modal bottom-modal ' + shareShow" @tap="shareHide">
      <view class="cu-dialog" @tap.stop>
        <view class="cu-bar bg-white">
          <view class="action text-green"></view>
          <view class="action text-red" @tap="shareHide">取消</view>
        </view>
        <view class="padding flex flex-direction">
          <share-friends :shareObj="{
              title: bargainInfo.shareTitle,
              desc: bargainInfo.goodsSpu.name,
              imgUrl: bargainInfo.picUrl,
              url: curLocalUrl,
            }"></share-friends>
          <button class="cu-btn margin-tb-sm lg round shadow-blur" :class="'bg-' + theme.themeColor"
            @tap="onCreatePoster">
            生成海报
          </button>
        </view>
      </view>
    </view>

    <view :class="'cu-modal ' + (posterShow ? 'show' : '')">
      <view class="cu-dialog show-bg">
        <view class="bg-white" style="height: calc(100vh - 200rpx)">
          <image :src="posterUrl" class="image-box"></image>
        </view>
        <view class="cu-bar bg-white solid-top show-btn">
          <view class="action margin-0 flex-sub" @tap="hidePosterShow">取消</view>

          <!-- #ifdef MP || APP-PLUS -->
          <view class="action margin-0 flex-sub solid-left text-red text-bold" @tap="savePoster">保存到相册</view>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <view class="action margin-0 flex-sub solid-left text-red text-bold" @tap="hidePosterShow">长按图片可保存或分享</view>
          <!-- #endif -->
        </view>
      </view>
    </view>

    <view :class="'cu-modal ' + modalRule">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">规则说明</view>
          <view class="action" @tap="ruleHide">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl text-left">
          <text>{{ bargainInfo.cutRule }}</text>
        </view>
      </view>
    </view>

    <!-- #ifdef H5 || APP-PLUS -->
    <!-- 二维码组件，不显示，只用来生成二维码调用 说明文档 https://github.com/q310550690/uni-app-qrcode -->
    <!-- 该组件生成二维码时需要canvas元素装载,固直接引用组件没有使用js，效果一样 -->
    <tki-qrcode ref="qrCodeRef" :size="200" :val="curLocalUrl" :show="false" @result="startCreatePoster"
      icon="/static/public/logo.png"></tki-qrcode>
    <!-- #endif -->
  </view>
</template>

<script>
  import shopInfo from "@/components/shop-info/index";
  const util = require("@/utils/util.js");
  const { base64src } = require("@/utils/base64src.js");
  const app = getApp();
  import api from "@/utils/api";
  import numberUtil from "@/utils/numberUtil.js";
  import dateUtil from "@/utils/dateUtil.js";
  import jweixin from "@/utils/jweixin";
  import poster from "@/components/wxa-plugin-canvas/poster/index";
  import countDown from "../../../component/count-down/index";
  import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
  import shareFriends from "@/components/share-friends/index";

  export default {
    data() {
      return {
        CustomBar: this.CustomBar,
        theme: app.globalData.theme, //全局颜色变量
        dateUtil: dateUtil,
        numberUtil: numberUtil,
        bargainInfo: {
          shopInfo: {},
          name: "",
          bargainUser: {
            launchNum: "",
            validBeginTime: "",
            validEndTime: "",
          },
          goodsSpu: {
            freightTemplat: {},
          },
          goodsSku: {
            specs: [],
          },
        },
        disabled: false,
        page: {
          searchCount: false,
          current: 1,
          size: 10,
          ascs: "",
          //升序字段
          descs: "create_time",
        },
        parameter: {},
        loadmore: true,
        bargainCutList: [],
        shareShow: "",
        curLocalUrl: "",
        userInfo: null,
        modalRule: "",
        id: "",
        specInfo: "",
        cutPercent: "",
        canCutPrice: "",
        havCutPrice: "",
        posterUrl: "",
        posterShow: false,
        posterConfig: "",
        article_description: "",
        hasBargainUser: false, //是否存在砍价数据
        bargainUserId: "",
        shopNewInfo: {}, //店铺信息
        showBg: false,
      };
    },

    components: {
      poster,
      countDown,
      tkiQrcode,
      shareFriends,
    },
    props: {},
    onShow() {
      if (this.bargainUserId) {
        api.bargainUserGet(this.bargainUserId).then((res) => {
          let bargainUser = res.data;
          this.id = bargainUser.bargainId;
          this.bargainInfoGet({
            bargainId: this.id,
            id: bargainUser.id,
          });
        });
      } else {
        this.bargainInfoGet({
          bargainId: this.id,
        });
      }
    },
    onLoad(options) {
      this.dateUtil = dateUtil;
      this.numberUtil = numberUtil;
      let id;
      let bargainUserId;
      if (options.scene) bargainUserId = decodeURIComponent(options.scene);
      if (options.bargainUserId) bargainUserId = options.bargainUserId;
      if (options.id) id = options.id;
      if (options.shopId) this.shopMethods(options.shopId);
      if (options.referee) uni.setStorageSync("referee", options.referee);
      this.bargainUserId = bargainUserId;
      this.id = id;

      app.initPage().then((res) => {
        this.userInfo = uni.getStorageSync("user_info");
      });
    },

    onShareAppMessage: function () {
      let bargainInfo = this.bargainInfo;
      let title = bargainInfo.shareTitle;
      let imageUrl = bargainInfo.picUrl;
      let path = "";

      if (bargainInfo.bargainUser && this.hasBargainUser) {
        path =
          "pages_grid/pages/bargain/bargain-detail/index?bargainUserId=" +
          bargainInfo.bargainUser.id +
          "&shopId=" +
          this.shopNewInfo.id || "";
      } else {
        path =
          "pages_grid/pages/bargain/bargain-detail/index?id=" +
          bargainInfo.id +
          "&shopId=" +
          this.shopNewInfo.id || "";
      }

      return {
        title: title,
        path: path,
        imageUrl: imageUrl,
        success: function (res) {
          if (res.errMsg == "shareAppMessage:ok") {
            console.log(res.errMsg);
          }
        },
        fail: function (res) {
          // 转发失败
        },
      };
    },
    methods: {
      shopMethods(shopId) {
        api.shopInfoGet(shopId).then((res) => {
          // console.log(`res`, res)
          this.shopNewInfo = res.data;
          // console.log(this.shopNewInfo,'我是商铺信息')
        });
      },
      //查询砍价信息
      bargainInfoGet(data) {
        api.bargainInfoGet(data).then((res) => {
          this.hasBargainUser = true;
          if (!res.data.bargainUser) {
            res.data.bargainUser = {
              validBeginTime: "",
              validEndTime: "",
            };
            this.hasBargainUser = false;
          }
          let bargainInfo = res.data;
          let goodsSku = bargainInfo.goodsSku;
          let specInfo = "";
          goodsSku.specs.forEach(function (specItem, index) {
            specInfo = specInfo + specItem.specValueName;
            if (goodsSku.specs.length != index + 1) {
              specInfo = specInfo + ";";
            }
          });
          this.bargainInfo = bargainInfo;
          this.specInfo = specInfo;
          if (this.hasBargainUser) {
            let canCutPrice =
              bargainInfo.goodsSku.salesPrice - bargainInfo.bargainPrice; //可砍
            let havCutPrice = bargainInfo.bargainUser.havBargainAmount; //已砍
            let cutPercent =
              Number((havCutPrice / canCutPrice) * 100).toFixed(2) + "%";
            this.bargainInfo = bargainInfo;
            this.parameter.bargainUserId = bargainInfo.bargainUser.id;
            this.cutPercent = cutPercent;
            this.canCutPrice = canCutPrice;
            this.havCutPrice = havCutPrice;
            this.bargainCutList = [];
            this.bargainCutPage();
          }
          setTimeout(() => {
            this.article_description = bargainInfo.goodsSpu
              ? bargainInfo.goodsSpu.description
              : "";
          }, 300);
          this.initShareUrl();
        });
      },

      //帮砍记录列表
      bargainCutPage() {
        api
          .bargainCutPage(
            Object.assign({}, this.page, util.filterForm(this.parameter))
          )
          .then((res) => {
            let bargainCutList = res.data.records;
            this.bargainCutList = [...this.bargainCutList, ...bargainCutList];
            if (bargainCutList.length < this.page.size) {
              this.loadmore = false;
            }
          });
      },

      //发起砍价
      bargainUserSave() {
        this.disabled = true;
        api
          .bargainUserSave({
            bargainId: this.bargainInfo.id,
            shopId: this.shopNewInfo.id,
          })
          .then((res) => {
            this.bargainInfoGet({
              bargainId: this.id,
            });
          });
      },

      loadMore() {
        this.page.current = this.page.current + 1;
        this.bargainCutPage();
      },
      initShareUrl() {
        // #ifdef H5
        this.curLocalUrl = window.location.href;
        if (!(this.curLocalUrl.indexOf("bargainUserId") != -1)) {
          if (this.bargainUserId) {
            //先判断是否有传过来的砍价ID，如果有就用原有的
            this.curLocalUrl =
              this.curLocalUrl + "&bargainUserId=" + this.bargainUserId;
          } else if (this.bargainInfo.bargainUser && this.hasBargainUser) {
            this.curLocalUrl =
              this.curLocalUrl +
              "&bargainUserId=" +
              this.bargainInfo.bargainUser.id;
          }
        }
        // 目前测试出的问题是：微信jsSDK分享的路径url必须 和 当前的页面路径一致，否则分享的链接会乱码，所以替换一下当前路径
        // 安卓有效，iOS微信浏览器有问题无法替换
        history.replaceState(history.state, null, this.curLocalUrl);
        // #endif
      },
      shareShowFun() {
        // #ifdef APP-PLUS
        this.curLocalUrl = util.setAppPlusShareUrl();
        if (this.bargainUserId) {
          //先判断是否有传过来的砍价ID，如果有就用原有的
          this.curLocalUrl =
            this.curLocalUrl + "&bargainUserId=" + this.bargainUserId;
        } else if (
          this.bargainInfo.bargainUser &&
          this.hasBargainUser &&
          !(this.curLocalUrl.indexOf("bargainUserId") != -1)
        ) {
          this.curLocalUrl =
            this.curLocalUrl +
            "&bargainUserId=" +
            this.bargainInfo.bargainUser.id;
        }
        // #endif
        this.shareShow = "show";
      },
      shareHide() {
        this.shareShow = "";
      },
      onPosterSuccess(e) {
        this.posterUrl = e;
        this.posterShow = true;
      },

      onPosterFail(err) {
        console.error(err);

        uni.showModal({
          content: "生成海报失败:" + JSON.stringify(err),
        });
      },
      hidePosterShow() {
        this.posterShow = false;
        this.shareShow = "";
      },
      /**
       * 异步生成海报
       */
      onCreatePoster() {
        // #ifdef MP
        api
          .qrCodeUnlimited({
            theme: app.globalData.theme, //全局颜色变量
            page: "pages/bargain/bargain-detail/index",
            scene: this.bargainInfo.bargainUser.id,
          })
          .then((res) => {
            base64src(res.data, (res) => {
              this.startCreatePoster(res);
            });
          });
        // #endif
        // #ifdef H5 || APP-PLUS
        uni.showLoading({
          title: "海报生成中",
          mask: true,
        });
        this.$refs.qrCodeRef._makeCode(); // H5需要先生成二维码后 才能生成海报
        // #endif
      },
      startCreatePoster(res) {
        // 开始 生成海报
        let desc = "长按识别小程序码";
        let shareImg = this.bargainInfo.picUrl;
        // #ifdef H5 || APP-PLUS
        desc = "长按识别二维码";
        // #endif
        let qrCode = res; //海报配置请参考 https://github.com/jasondu/wxa-plugin-canvas
        let posterConfig = {
          width: 750,
          height: 1280,
          backgroundColor: "#fff",
          debug: false,
          blocks: [
            {
              width: 690,
              height: 808,
              x: 30,
              y: 183,
              borderWidth: 2,
              borderColor: "#f0c2a0",
              borderRadius: 20,
            },
            {
              width: 634,
              height: 74,
              x: 59,
              y: 770,
              backgroundColor: "#fff",
              opacity: 0.5,
              zIndex: 100,
            },
          ],
          texts: [
            {
              x: 30,
              y: 113,
              baseLine: "top",
              text: this.bargainInfo.shareTitle,
              fontSize: 38,
              color: "#080808",
            },
            {
              x: 92,
              y: 810,
              fontSize: 38,
              baseLine: "middle",
              text: this.bargainInfo.goodsSpu.name,
              width: 570,
              lineNum: 1,
              color: "#080808",
              zIndex: 200,
            },
            {
              x: 59,
              y: 895,
              baseLine: "middle",
              text: [
                {
                  text: "底价",
                  fontSize: 28,
                  color: "#ec1731",
                },
                {
                  text: "¥" + this.bargainInfo.bargainPrice,
                  fontSize: 36,
                  color: "#ec1731",
                  marginLeft: 30,
                },
              ],
            },
            {
              x: 522,
              y: 895,
              baseLine: "middle",
              text: "原价 ¥" + this.bargainInfo.goodsSku.salesPrice,
              fontSize: 28,
              color: "#929292",
            },
            {
              x: 59,
              y: 945,
              baseLine: "middle",
              text: [
                {
                  text: this.bargainInfo.goodsSpu.sellPoint,
                  fontSize: 28,
                  color: "#929292",
                  width: 570,
                  lineNum: 1,
                },
              ],
            },
            {
              x: 360,
              y: 1065,
              baseLine: "top",
              text: desc,
              fontSize: 38,
              color: "#080808",
            },
            {
              x: 360,
              y: 1123,
              baseLine: "top",
              text: "快来帮好友砍一刀",
              fontSize: 28,
              color: "#929292",
            },
          ],
          images: [
            {
              width: 634,
              height: 634,
              x: 59,
              y: 210,
              url: shareImg,
            },
            {
              width: 220,
              height: 220,
              x: 92,
              y: 1020,
              url: qrCode,
            },
          ],
        };
        let userInfo = uni.getStorageSync("user_info");

        if (userInfo && userInfo.headimgUrl) {
          //如果有头像则显示
          posterConfig.images.push({
            width: 62,
            height: 62,
            x: 30,
            y: 30,
            borderRadius: 62,
            url: userInfo.headimgUrl,
          });
          posterConfig.texts.push({
            x: 113,
            y: 61,
            baseLine: "middle",
            text: userInfo.nickName,
            fontSize: 32,
            color: "#8d8d8d",
          });
        }
        this.posterConfig = posterConfig;
        this.$refs.posterRef.onCreate(false, this.posterConfig); // 入参：true为抹掉重新生成
      },
      //点击保存到相册
      savePoster: function () {
        var that = this;
        uni.saveImageToPhotosAlbum({
          filePath: that.posterUrl,
          success(res) {
            uni.showModal({
              content: "图片已保存到相册，赶紧晒一下吧~",
              showCancel: false,
              confirmText: "好的",
              confirmColor: "#333",
              success: function (res) {
                if (res.confirm) {
                  /* 该隐藏的隐藏 */
                  that.shareShow = "";
                }
              },
              fail: function (res) {
                console.log(res);
              },
            });
          },
        });
      },

      //砍一刀
      bargainCutSave() {
        this.disabled = true;
        let bargainUserId = this.bargainInfo.bargainUser.id;
        api
          .bargainCutSave({
            bargainUserId: bargainUserId,
          })
          .then((res) => {
            let bargainCut = res.data;
            let that = this;
            uni.showModal({
              content: "恭喜为好友砍下" + bargainCut.cutPrice.toFixed(2) + "元",
              confirmColor: "#ff0000",
              success(res) {
                that.bargainInfoGet({
                  bargainId: that.id,
                  id: bargainUserId,
                });
              },
            });
          });
      },

      ruleShow() {
        this.modalRule = "show";
      },

      ruleHide() {
        this.modalRule = "";
      },

      //前去购买
      toBuy() {
        let bargainInfo = this.bargainInfo;
        let bargainUser = bargainInfo.bargainUser;
        let goodsSpu = bargainInfo.goodsSpu;
        let goodsSku = bargainInfo.goodsSku;
        /* 把参数信息异步存储到缓存当中 */

        uni.setStorage({
          key: "param-orderConfirm",
          data: [
            {
              shopInfo: this.shopNewInfo,
              spuId: goodsSpu.id,
              skuId: goodsSku.id,
              quantity: 1,
              salesPrice: (goodsSku.salesPrice - this.havCutPrice).toFixed(2),
              spuName: goodsSpu.name,
              specInfo: this.specInfo,
              picUrl: goodsSku.picUrl ? goodsSku.picUrl : goodsSpu.picUrls[0],
              freightTemplat: goodsSpu.freightTemplat,
              weight: goodsSku.weight,
              volume: goodsSku.volume,
              orderType: "1",
              marketId: bargainInfo.id,
              relationId: bargainUser.id,
            },
          ],
        });
        uni.navigateTo({
          url: "../bargain-order-confirm/index",
        });
      },

      countDownDone() {
        this.onLoad();
      },
    },
  };
</script>
<style>
  .row-img {
    width: 200rpx !important;
    height: 200rpx !important;
    border-radius: 10rpx;
  }

  .bargain-btn {
    width: 580rpx;
    height: 76rpx;
  }

  .show-bg {
    height: 84%;
    margin-top: 120rpx;
  }

  .image-box {
    height: 90%;
  }

  .show-btn {
    margin-top: -130rpx;
  }

  .themeColor {
    color: #fea51a;
  }

  .bg-themeColor {
    background: #fea51a;
    color: #ffffff;
  }
  .bg-themeColor1 {
    background: #FFEDD1;
  }

  .countDownBox {
    width: 526rpx;
    margin: 0 auto;
  }

  .countDown {
    height: 60rpx;
    background: #ffedd1;
    border-radius: 30rpx;
    margin: 30rpx auto;
    line-height: 60rpx;
    font-size: 24rpx;
    color: #666666;
    display: flex;
    justify-content: center;
    font-weight: 600;
  }
  .button1{
    width: 636rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: linear-gradient(180deg, #FFB767 0%, #FF7825 100%);
    border-radius: 28px;
    font-size: 28rpx;
    letter-spacing:1px
  }
  .button2{
    width: 636rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    border-radius: 28px;
    border: 1px solid #FEA51A;
    background: #ffffff;
    color: #FEA51A;
    letter-spacing:1px

  }
  .button3{
    width: 636rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    border-radius: 28px;
    color: #333333;
    overflow: hidden;
    letter-spacing:1px
  }
  .detailBack{
    width: 100%;
    height: 500rpx;
    background: #fea51a;
  }
</style>
<style  scoped>
.cu-card.article{
  margin-top:-400rpx
}
</style>